<html>
<head>
<script>
/*<![CDATA[*/
$(function () {$("[data-toggle='popover']").popover();
	formGroupValidator();
	formApiValidator();
    $('#modal-default1').on('hidden.bs.modal', function () {
		$("#systemName").val("");   
		$("#form-group").data('bootstrapValidator').destroy();
        $('#form-group').data('bootstrapValidator', null);
        formGroupValidator();
		 //$("#form-group").data('bootstrapValidator').resetForm();
    });
    
    $('#modal-api').on('hidden.bs.modal', function () {
		$("#form-api").data('bootstrapValidator').destroy();
        $('#form-api').data('bootstrapValidator', null);
        formApiValidator();
		 //$("#form-group").data('bootstrapValidator').resetForm();
    });
    	
    $("#btn-submit-group").click(function () {//非submit按钮点击后进行验证，如果是submit则无需此句直接验证
        $("#form-group").bootstrapValidator('validate');//提交验证
        if ($("#form-group").data('bootstrapValidator').isValid()) {//获取验证结果，如果成功，执行下面代码
        	 var params = $("#form-group").serialize();  
        	 var systemName = $("#systemName").val();
             $.ajax( {  
                 type : "POST",  
                 url : "/addGroup",  
                 data : params,  
                 success : function(msg) {
                	 if(msg){
                		 $('#modal-default1').modal('hide');
                		 loadGroup(systemName);
                	 }else{
                         alert("保存失败，请检查该系统名称是否已经存在 ！");  
                	 }
                 }  ,
 				error:function(){
					alert("请求失败！");
			　　　}
             });

        }
    });
    
    $("#form-sequence").bootstrapValidator({
        live: 'enabled',//验证时机，enabled是内容有变化就验证（默认），disabled和submitted是提交再验证
        excluded: [':disabled', ':hidden', ':not(:visible)'],//排除无需验证的控件，比如被禁用的或者被隐藏的
        //submitButtons: '#btn-submit-sequence',//指定提交按钮，如果验证失败则变成disabled，但我没试成功，反而加了这句话非submit按钮也会提交到action指定页面
        message: '通用的验证失败消息',//好像从来没出现过
        feedbackIcons: {//根据验证结果显示的各种图标
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
        	group: {validators: {notEmpty: {message: '所属系统不能为空'}}},
        	name: {validators: {notEmpty: {message: '监控名称不能为空'}}},
        	frequency: {validators: {notEmpty: {message: '监控频率不能为空'}}}
        }
    });
    $("#btn-submit-sequence").click(function () {//非submit按钮点击后进行验证，如果是submit则无需此句直接验证
        $("#form-sequence").bootstrapValidator('validate');//提交验证
        if ($("#form-sequence").data('bootstrapValidator').isValid()) {//获取验证结果，如果成功，执行下面代码
        	if($("#example1 tbody tr").length==0){
        		alert("请先添加至少一条API");
        		return;
        	}
          	 var params = $("#form-sequence").serialize();
              $.ajax( {  
                 type : "POST",  
                 url : "/saveSequenceMonitor",
                 data : params,  
                 success : function(msg) {
                	 if(msg){
                         alert("保存成功 ！");
                         window.location.href="/"; 
                	 }else{
                         alert("保存失败 ！");  
                	 }
                 },
 				error:function(){
					alert("请求失败！");
			　　　}
             }); 

        }
    });
});
function formGroupValidator(){
    $("#form-group").bootstrapValidator({
        live: 'enabled',//验证时机，enabled是内容有变化就验证（默认），disabled和submitted是提交再验证
        feedbackIcons: {//根据验证结果显示的各种图标
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
        	systemName: {
                validators: {
                    notEmpty: {//检测非空,radio也可用
                        message: '系统名称不能为空'
                    }
                }
            }
        }
    });
}
function formApiValidator(){
    $("#form-api").bootstrapValidator({
        live: 'enabled',//验证时机，enabled是内容有变化就验证（默认），disabled和submitted是提交再验证
        excluded: [':disabled', ':hidden', ':not(:visible)'],//排除无需验证的控件，比如被禁用的或者被隐藏的
        //submitButtons: '#btn-submit-sequence',//指定提交按钮，如果验证失败则变成disabled，但我没试成功，反而加了这句话非submit按钮也会提交到action指定页面
        message: '通用的验证失败消息',//好像从来没出现过
        feedbackIcons: {//根据验证结果显示的各种图标
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
        	url: {validators: {notEmpty: {message: 'API地址不能为空'},regexp:{regexp:/^(http|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&amp;:/~\+#]*[\w\-\@?^=%&amp;/~\+#])?/,message:'API地址必须使用 http://或https://开始'}}},
            httpMethod: {validators: {notEmpty: {message: 'API类型不能为空'}}}
        }
    });
}
function loadGroup(selected){
    $.ajax({
        url : "/getGroups" , //获取数据列 
        type : 'GET',
        data : {},
        success : function(data) {
        	var html = "";
        	$.each(data,function(n,value) {
        		if(value.name == selected){
        			html += '<option selected = "selected" value="'+ value.name  +'">' + value.name + '</option>';
        		}else{
        			html += '<option value="'+ value.name +'">' + value.name + '</option>';
        		}
        	});  
        	$("select[name='group']").empty();
        	$("select[name='group']").append(html);
        	$("select[name='group']").trigger("change");
        }
	}); 
	
}

function showApiModal(btn,flag){
	var index;
	if(flag=='edit'){
		index = $(btn).parent().find("input[name='index']").val();
		var httpMethod = $(btn).parent().find("input[name='httpRequest["+index+"].httpMethod']").val();
		var url = $(btn).parent().find("input[name='httpRequest["+index+"].url']").val();
		var headers = $(btn).parent().find("input[name='httpRequest["+index+"].headers']").val();
		var parameters = $(btn).parent().find("input[name='httpRequest["+index+"].parameters']").val();
		var conditionType = $(btn).parent().find("input[name='httpRequest["+index+"].conditionType']").val();
		var condition = $(btn).parent().find("input[name='httpRequest["+index+"].condition']").val();
		var resultType = $(btn).parent().find("input[name='httpRequest["+index+"].resultType']").val();
		var variables = $(btn).parent().find("input[name='httpRequest["+index+"].variables']").val();
		
	    $("#form-api :radio[name='httpMethod'][value='" + httpMethod + "']").prop("checked", "checked");
	    $("#form-api input[name='url']").val(url);
	    $("#form-api textarea[name='headers']").text(headers);
	    $("#form-api textarea[name='parameters']").text(parameters);
	    $("#form-api select[name='conditionType'] option[value='"+conditionType+"']").attr("selected", "selected");
	    $("#form-api input[name='condition']").val(condition);
	    $("#form-api :radio[name='resultType'][value='" + resultType + "']").prop("checked", "checked");
	    $("#form-api textarea[name='variables']").text(variables);
	}else{
		$("#form-api")[0].reset(); 
		$("#form-api textarea[name='headers']").text("");
	    $("#form-api textarea[name='parameters']").text("");
	    $("#form-api textarea[name='variables']").text("");
	    index = $("#example1 tbody tr").length;
	}
	
    $("#form-api input[name='apiIndex']").val(index);
	
	$('#modal-api').modal('show');
}


function saveApiModal(){
    $("#form-api").bootstrapValidator('validate');//提交验证
    if ($("#form-api").data('bootstrapValidator').isValid()) {//获取验证结果，如果成功，执行下面代码
    	  var httpMethod =  $("#form-api :radio[name='httpMethod']:checked").val();
    	  var url = $("#form-api input[name='url']").val();
    	  var headers =  $("#form-api textarea[name='headers']").val();
    	  var parameters = $("#form-api textarea[name='parameters']").val();
    	  var conditionType = $("#form-api select[name='conditionType']").val();
    	  var condition =  $("#form-api input[name='condition']").val();
    	  var resultType = $("#form-api :radio[name='resultType']:checked").val();
    	  var variables =  $("#form-api textarea[name='variables']").val();
    	  resultType = resultType == undefined ? '' : resultType;
    	  var hlength = headers == '' ? 0 : headers.split("\n").length;
    	  var plength = parameters == '' ? 0 : parameters.split("\n").length;
    	  var vlength = variables == '' ? 0 : variables.split("\n").length;
    	  var tdInfo = '<span style="color:red;">'+ hlength +'</span> 请求头，<span style="color:red;">'+ plength +'</span> 参数，<span style="color:red;">'+ vlength +'</span> 变量';
    	  var index = $("#form-api input[name='apiIndex']").val();
    	    if(index==$("#example1 tbody tr").length){
    	   		var tr = '<tr>'
    	       		+'<td>'+(Number(index)+1)+'</td>'
    	       		+'<td>'+httpMethod+'</td>'
    	       		+'<td>'+url+'</td>'
    	       		+'<td>'
    	       		+ tdInfo
    	       		+'</td>'
    	       		+'<td>'
    	       		+ '<button type="button" class="btn btn-box-tool" onclick="showApiModal(this,\'edit\');"><i class="fa fa-edit"></i></button>'
    	       		+ '<button type="button" class="btn btn-box-tool" onclick="removeApiRow(this);"><i class="fa fa-trash-o"></i></button>'
    	       		+ '<input type="hidden" name="index" value="' + index + '" />'
    	       		+ '<input type="hidden" id="httpRequest' + index + '.guid" name="httpRequest['+index+'].guid" value="" />'
    	       		+ '<input type="hidden" id="httpRequest' + index + '.pguid" name="httpRequest['+index+'].pguid" value="" />'
    	       		+ '<input type="hidden" id="httpRequest' + index + '.sort" name="httpRequest['+index+'].sort" value="'+ (Number(index)+1) +'" />'
    	       		+ '<input type="hidden" id="httpRequest' + index + '.httpMethod" name="httpRequest['+index+'].httpMethod" value="'+ httpMethod +'" />'
    	       		+ '<input type="hidden" id="httpRequest' + index + '.url" name="httpRequest['+index+'].url" value="'+ url +'" />'
    	       		+ '<input type="hidden" id="httpRequest' + index + '.headers" name="httpRequest['+index+'].headers" value="'+ headers +'" />'
    	       		+ '<input type="hidden" id="httpRequest' + index + '.parameters" name="httpRequest['+index+'].parameters" value="'+ parameters +'" />'
    	       		+ '<input type="hidden" id="httpRequest' + index + '.conditionType" name="httpRequest['+index+'].conditionType" value="'+ conditionType +'" />'
    	       		+ '<input type="hidden" id="httpRequest' + index + '.condition" name="httpRequest['+index+'].condition" value="'+ condition +'" />'
    	       		+ '<input type="hidden" id="httpRequest' + index + '.resultType" name="httpRequest['+index+'].resultType" value="'+ resultType +'" />'
    	       		+ '<input type="hidden" id="httpRequest' + index + '.variables" name="httpRequest['+index+'].variables" value="'+ variables +'" />'
    	       		+ '</td>'                                           
    	       		+ '</tr>';
    	         
    	    
    	        $("#example1 tbody").append(tr);
    	    }else{
    	        $("#example1 tbody tr:eq("+index+") td:eq(1)").text(httpMethod);
    	        $("#example1 tbody tr:eq("+index+") td:eq(2)").text(url);
    	        $("#example1 tbody tr:eq("+index+") td:eq(3)").html(tdInfo);
    	        var btn = $("#example1 tbody tr:eq("+index+") td:eq(4) button:eq(0)");
    			$(btn).parent().find("input[name='httpRequest["+index+"].httpMethod']").val(httpMethod);
    			$(btn).parent().find("input[name='httpRequest["+index+"].url']").val(url);
    			$(btn).parent().find("input[name='httpRequest["+index+"].headers']").val(headers);
    		    $(btn).parent().find("input[name='httpRequest["+index+"].parameters']").val(parameters);
    			$(btn).parent().find("input[name='httpRequest["+index+"].conditionType']").val(conditionType);
    			$(btn).parent().find("input[name='httpRequest["+index+"].condition']").val(condition);
    			$(btn).parent().find("input[name='httpRequest["+index+"].resultType']").val(resultType);
    			$(btn).parent().find("input[name='httpRequest["+index+"].variables']").val(variables);
    	    }
    		$('#modal-api').modal('hide');
    }
}

function removeApiRow(btn){
	$(btn).parent().parent().remove();
    $("#example1 tbody tr").each(function () {
    	var index = $(this).index();
    	var oldIndex = $(this).find("input[name='index']").val();
        $(this).find("td:eq(0)").text((Number(index)+1));
        $(this).find("input[name='index']").val(index);
        $(this).find("input[name='httpRequest["+oldIndex+"].sort']").val((Number(index)+1));
        $(this).find("input[type='hidden']").each(function(){
        	var id = $(this).attr("id");
        	var name = $(this).attr("name");
        	if(id){
        		$(this).attr("id",id.replace(oldIndex, index));
        		$(this).attr("name",name.replace(oldIndex, index));
        	}
        });
    });
}


function importPostManScript(){
	var script = $("#postManScript").val();
	if(!script)return;
    $.ajax({
        url : "/resolverPostMan" , //获取数据列 
        type : 'POST',
        data : {"postmanScript":script},
        success : function(data) {
        	if(!data){
        		alert("导入失败，脚本无效！");
        		return;
        	}
        	var html = "";
        	$.each(data,function(n,value) {
        		var index = Number(value.sort)-1;
        		var headers = value.headers == null ? '' : value.headers;
        		var parameters = value.parameters == null ? '' : value.parameters;
            	var hlength = getParamsSize(headers);
          	    var plength = getParamsSize(parameters);
          	    var tdInfo = '<span style="color:red;">'+ hlength +'</span> 请求头，<span style="color:red;">'+ plength +'</span> 参数，<span style="color:red;">0</span> 变量';
          	  
    	   		var tr = '<tr>'
    	       		+'<td>'+value.sort+'</td>'
    	       		+'<td>'+value.httpMethod+'</td>'
    	       		+'<td>'+value.url+'</td>'
    	       		+'<td>'
    	       		+ tdInfo
    	       		+'</td>'
    	       		+'<td>'
    	       		+ '<button type="button" class="btn btn-box-tool" onclick="showApiModal(this,\'edit\');"><i class="fa fa-edit"></i></button>'
    	       		+ '<button type="button" class="btn btn-box-tool" onclick="removeApiRow(this);"><i class="fa fa-trash-o"></i></button>'
    	       		+ '<input type="hidden" name="index" value="' + index + '" />'
    	       		+ '<input type="hidden" id="httpRequest' + index + '.guid" name="httpRequest['+index+'].guid" value="" />'
    	       		+ '<input type="hidden" id="httpRequest' + index + '.pguid" name="httpRequest['+index+'].pguid" value="" />'
    	       		+ '<input type="hidden" id="httpRequest' + index + '.sort" name="httpRequest['+index+'].sort" value="'+ value.sort +'" />'
    	       		+ '<input type="hidden" id="httpRequest' + index + '.httpMethod" name="httpRequest['+index+'].httpMethod" value="'+ value.httpMethod +'" />'
    	       		+ '<input type="hidden" id="httpRequest' + index + '.url" name="httpRequest['+index+'].url" value="'+ value.url +'" />'
    	       		+ '<input type="hidden" id="httpRequest' + index + '.headers" name="httpRequest['+index+'].headers" value="'+ headers +'" />'
    	       		+ '<input type="hidden" id="httpRequest' + index + '.parameters" name="httpRequest['+index+'].parameters" value="'+ parameters +'" />'
    	       		+ '<input type="hidden" id="httpRequest' + index + '.conditionType" name="httpRequest['+index+'].conditionType" value="'+ value.conditionType +'" />'
    	       		+ '<input type="hidden" id="httpRequest' + index + '.condition" name="httpRequest['+index+'].condition" value="" />'
    	       		+ '<input type="hidden" id="httpRequest' + index + '.resultType" name="httpRequest['+index+'].resultType" value="" />'
    	       		+ '<input type="hidden" id="httpRequest' + index + '.variables" name="httpRequest['+index+'].variables" value="" />'
    	       		+ '</td>'                                           
    	       		+ '</tr>';
    	      html+=tr;
        	});  
        	$("#example1 tbody").empty();
        	$("#example1 tbody").append(html);
        	$("#postManScript").val("");
    		$('#modal-postman').modal('hide');
        }
	}); 
}

function testApi(){

	/*   	 */
	if($("#example1 tbody tr").length==0){
		alert("请先添加至少一条API");
		return;
	}
 	 var params = $("#form-sequence").serialize();
     $.ajax( {  
        type : "POST",
        url : "/testApi",
        data : params,  
        success : function(msg) {
       	 if(msg){
          	var html = "";
         	$("#table-test-result tbody").empty();
    		$('#modal-testApi').modal('show');
         	$.each(msg,function(n,value) {
         		var tr = '<tr>'
 	       		+'<td width="30px">'+value.sort+'</td>'
 	       		+'<td width="150px">'+value.url+'</td>'
 	       		+'<td width="70px">'+value.status+'</td>'
 	       		+'<td width="70px">' + value.costTime +' 毫秒</td>'         
 	       		+'<td width="80px">' + value.statusCode +'</td>'         
 	       		+'<td width="70px">' + '<button type="button" class="btn btn-default btn-sm" title="响应内容" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="hover" data-content=""><i class="fa fa-ellipsis-h"></i></button>' +'</td>'         
 	       		+'<td width="150px">' + value.log +'</td>'        
 	       		+'<td width="150px">' + value.variables +'</td>'                                          
 	       		+'</tr>';
         		html += tr;
             	$("#table-test-result tbody").append(tr);
        		$("button[data-toggle='popover']:eq("+n+")").attr("data-content",value.responseBody);
         	});
    		$("[data-toggle='popover']").popover();
       	 }else{
                alert("测试失败 ！");  
       	 }
        },
		error:function(){
			alert("测试失败！");
	　　　}
    }); 
}
function getParamsSize(paramString){
	var l=0;
	var seperate = '\r\n';
	if(paramString.indexOf(seperate)<0){
		seperate = '\n';
	}
	var arr = paramString.split(seperate);
	for(j = 0,len=arr.length; j < len; j++) {
		if(arr[j].indexOf('::') > -1){
		  l++;	
		}
	}
	return l;
}
/*]]>*/
</script>
</head>
<body>
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1 th:if="${form.guid} eq null">添加监控<small>API监控</small></h1>
      <h1 th:if="${form.guid} ne null">配置监控<small>API监控</small></h1>
      	
      <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> 主页</a></li>
        <li><a href="/monitorList">API监控</a></li>
        <li th:if="${form.guid} eq null" class="active">添加监控</li>
        <li th:if="${form.guid} ne null" class="active">配置监控</li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content">
	  <div class="row">
        <div class="col-xs-12">  
          <div class="box box-primary">
            <div class="box-header with-border">
              <h3 class="box-title">多API</h3>
            </div>
            <!-- /.box-header -->
            <!-- form start -->
            <form class="form-horizontal" id="form-sequence" th:object="${form}">
              <input type="hidden" th:field="*{type}" />
              <input type="hidden" th:field="*{guid}" />
              <div class="box-body">
                <div class="form-group">
                  <label for="group" class="col-sm-2 control-label">所属系统<span style="color:red;"> *</span></label>
                  <div class="col-sm-8">
					  <select class="form-control" th:field="*{group}">
					    <option th:each="system : ${systems}" th:value="${system.name}" th:text="${system.name}"></option>
					  </select>
                  </div>
                  <div class="col-sm-1">
				  <button type="button" class="btn btn-default" data-toggle="modal" data-target="#modal-default1"><i class="fa fa-plus"></i></button>
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-sm-2 control-label">监控名称<span style="color:red;"> *</span></label>
                  <div class="col-sm-8">
                    <input type="text" class="form-control" th:field="*{name}" />
                  </div>
                </div>
				
                <div class="form-group">
                  <label class="col-sm-2 control-label">监控频率<span style="color:red;"> *</span></label>
                  <div class="col-sm-8">
					  <select class="form-control" th:field="*{frequency}">
					    <option th:each="item : ${frequencys}" th:value="${item.value}" th:text="${item.label}"></option>
					  </select>
                  </div>
                </div>
				
                <div class="form-group">
                  <label class="col-sm-2 control-label">API管理</label>
                  <div class="col-sm-8">
                    <button type="button" class="btn btn-default" data-toggle="modal" data-target="#modal-postman">导入postman脚本</button>
                    <button type="button" class="btn btn-default" style="margin-left:10px;" onclick="testApi();">测试API</button>
				  </div>
                </div>
			
				<div class="form-group">
                  <div class="col-sm-offset-2 col-sm-8">
					<table id="example1" class="table table-bordered">
					<thead>
					<tr>
					  <th>编号</th>
					  <th>API类型</th>
					  <th>API地址</th>
					  <th>概况</th>
					  <th>操作</th>
					</tr>
					</thead>
					<tbody>
				      <tr th:each="row,rowStat : *{httpRequest}">
				        <td th:text="${row.sort}"></td>
				        <td th:text="${row.httpMethod}"></td>
				        <td th:text="${row.url}"></td>
				        <td><span style="color:red;" th:text="${row.headersMap==null}? '0' : ${row.headersMap.size()}"></span> 请求头，<span style="color:red;" th:text="${row.parametersMap==null}? '0' : ${row.parametersMap.size()}"></span> 参数，<span style="color:red;" th:text="${row.variablesMap==null}? '0' : ${row.variablesMap.size()}"></span> 变量</td>					  
				        <td>
						  <button type="button" class="btn btn-box-tool" onclick="showApiModal(this,'edit');">
							<i class="fa fa-edit"></i>
						  </button>
						  <button type="button" class="btn btn-box-tool" onclick="removeApiRow(this);">
							<i class="fa fa-trash-o"></i>
						  </button>
						  <input type="hidden" name="index" th:value="${rowStat.index}"/>
						  <input type="hidden" th:field="*{httpRequest[__${rowStat.index}__].guid}" />
						  <input type="hidden" th:field="*{httpRequest[__${rowStat.index}__].pguid}" />
						  <input type="hidden" th:field="*{httpRequest[__${rowStat.index}__].sort}" />
						  <input type="hidden" th:field="*{httpRequest[__${rowStat.index}__].httpMethod}" />
						  <input type="hidden" th:field="*{httpRequest[__${rowStat.index}__].url}" />
						  <input type="hidden" th:field="*{httpRequest[__${rowStat.index}__].headers}" />
						  <input type="hidden" th:field="*{httpRequest[__${rowStat.index}__].parameters}" />
						  <input type="hidden" th:field="*{httpRequest[__${rowStat.index}__].conditionType}" />
						  <input type="hidden" th:field="*{httpRequest[__${rowStat.index}__].condition}" />
						  <input type="hidden" th:field="*{httpRequest[__${rowStat.index}__].resultType}" />
						  <input type="hidden" th:field="*{httpRequest[__${rowStat.index}__].variables}" />
					    </td>
				      </tr>
					</tbody>
					<tfoot></tfoot>
				  </table>
				  <button style="margin:0px;position:absolute;right:16px;bottom:-10px;" type="button" class="btn btn-default btn-sm" onclick="showApiModal(this,'add');"><i class="fa fa-plus"></i></button>
				
				  </div>
			    </div>
				
                <div class="form-group">
                  <label class="col-sm-2 control-label">备注</label>
                  <div class="col-sm-8">
                  <textarea class="form-control" rows="3" th:field="*{remark}" ></textarea>
				  </div>
                </div>
				
              </div>
              <!-- /.box-body -->
              <div class="box-footer">
                <a class="btn btn-default" href="/monitorList">返回</a>
                <button id="btn-submit-sequence" class="btn btn-info pull-right">提交</button>
              </div>
              <!-- /.box-footer -->
            </form>
          </div>
	    </div>
      </div>
	  <div class="modal fade" id="modal-default1">
		  <div class="modal-dialog">
			<div class="modal-content">
			  <div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
				  <span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title">添加系统</h4>
			  </div>
			  <div class="modal-body">
			    <form class="form-horizontal" id="form-group">
				  <div class="box-body">
					<div class="form-group">
					  <label for="systemName" class="col-sm-2 control-label">系统名称<span style="color:red;"> *</span></label>
					  <div class="col-sm-9">
						<input type="text" class="form-control" name="systemName" id="systemName" />
					  </div>
					</div>
					
				  </div>
				</form>
			  </div>
			  <div class="modal-footer">
				<button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
				<button type="button" class="btn btn-primary" id="btn-submit-group">保存</button>
			  </div>
			</div>
			<!-- /.modal-content -->
		  </div>
		  <!-- /.modal-dialog -->
	  </div>
	  <!-- /.modal -->
	  
	  <div class="modal fade" id="modal-postman">
		  <div class="modal-dialog">
			<div class="modal-content">
			  <div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
				  <span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title">导入postman脚本</h4>
			  </div>
			  <div class="modal-body">
			  
				<form role="form">
				  <div class="box-body">
					<div class="form-group">
					  <label>有关postman脚本的使用，请查看<a href="https://www.jianshu.com/p/e16e24e9abc7" target="_blank">操作指引</a></label>
					  <textarea class="form-control" rows="10" placeholder="复制postman脚本到这里..." id="postManScript"></textarea>
					</div>
				  </div>
				</form>
			  </div>
			  <div class="modal-footer">
				<button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
				<button type="button" class="btn btn-primary" onclick="importPostManScript();">导入</button>
			  </div>
			</div>
			<!-- /.modal-content -->
		  </div>
		  <!-- /.modal-dialog -->
	  </div>
	  <!-- /.modal -->
	  	  
	  <div class="modal fade" id="modal-testApi">
		  <div class="modal-dialog" style="width:900px">
			<div class="modal-content">
			  <div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
				  <span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title">API测试结果</h4>
			  </div>
			  <div class="modal-body table-responsive" style="overflow-y:auto;max-height:500px;">
				<table class="table table-bordered table-striped" style="word-break:break-word" id="table-test-result">
				  <thead>
					<tr>
					  <th></th>
					  <th>API地址</th>
					  <th>测试结果</th>
					  <th>响应时间</th>
					  <th>响应状态码</th>
					  <th>响应内容</th>
					  <th>日志</th>
					  <th>提取变量</th>
					</tr>
				  </thead>
				  <tbody>
				  </tbody>
				  <tfoot>
				  </tfoot>
				</table>
			  </div>
			  <div class="modal-footer">
				<button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
			  </div>
			</div>
			<!-- /.modal-content -->
		  </div>
		  <!-- /.modal-dialog -->
	  </div>
	  <!-- /.modal -->
	  
	  <div class="modal fade" id="modal-api">
		  <div class="modal-dialog">
			<div class="modal-content">
			  <div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
				  <span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title">编辑API</h4>
			  </div>
			  <div class="modal-body">
			    <form class="form-horizontal" id="form-api">
			      <input type="hidden" name="apiIndex" />
				  <div class="box-body">
	                <div class="form-group">
	                  <label class="col-sm-2 control-label">API类型<span style="color:red;"> *</span></label>
	                  <div class="col-sm-9 radio">
	                    <label>
	                    <input type="radio" name="httpMethod" id="httpMethod1" value="GET" checked="checked" />GET 
	                    </label>
	                    <label>
	                    <input type="radio" name="httpMethod" id="httpMethod2" value="POST" />POST 
	                    </label>
	                    <label>
	                    <input type="radio" name="httpMethod" id="httpMethod3" value="HEAD" />HEAD
	                    </label>
	                    <label>
	                    <input type="radio" name="httpMethod" id="httpMethod4" value="PUT" />PUT
	                    </label>
	                    <label>
	                    <input type="radio" name="httpMethod" id="httpMethod5" value="DELETE" />DELETE
	                    </label>
	                  </div>
	                </div>
						
	                <div class="form-group">
	                  <label  class="col-sm-2 control-label">API地址<span style="color:red;"> *</span></label>
	                  <div class="col-sm-9">
	                    <input type="text" class="form-control" name="url" th:value="*{url}"/>
	                  </div>
	                </div>
	                <div class="form-group">
	                  <label class="col-sm-2 control-label">请求头部</label>
	                  <div class="col-sm-9">
	                  <textarea name="headers" class="form-control" rows="3" placeholder="头部key::头部value&#10;头部key::头部value"  th:text="*{headers}"></textarea>
					  </div>
	                </div>
					
	                <div class="form-group">
	                  <label class="col-sm-2 control-label">请求参数</label>
	                  <div class="col-sm-9">
	                  <textarea name="parameters" class="form-control" rows="3" placeholder="参数key::参数value&#10;参数key::参数value"  th:text="*{parameters}"></textarea>
					  </div>
	                </div>
					
	                <div class="form-group">
	                  <label class="col-sm-2 control-label">结果校验</label>
					  <div class="col-sm-3">
						  <select class="form-control" name="conditionType">
						    <option value="DEFAULT"></option>
							<option value="STATUSCODE">响应码</option>
							<option value="CONTAINS">内容包含</option>
							<option value="DOESNT_CONTAIN">内容不包含</option>
						  </select>
	                  </div>
	                  <div class="col-sm-6">
	                    <input type="text" class="form-control" name="condition"  th:value="*{condition}"/>
	                  </div>
	                </div>
					
					<div class="form-group">
					  <label class="col-sm-2 control-label">结果提取</label>
					  <div class="col-sm-9 radio">
						<label>
						  <input type="radio" name="resultType" id="resultType1" value="XML" />xPath 
						</label>
						<label>
						  <input type="radio" name="resultType" id="resultType2" value="JSON" />jsonPath 
						</label>
						<label>查看<a href="https://www.jianshu.com/p/e404edb8c14f" target="_blank">xPath和jsonPath的使用教程</a></label>
					  </div>
					</div>
					
					<div class="form-group">
					  <div class="col-sm-offset-2 col-sm-9">
					    <textarea class="form-control" rows="3" placeholder="$$变量名::xPath路径&#10;$$变量名::xPath路径" id="variables" name="variables"></textarea>
					  </div>
					</div>
				  </div>
				</form>
			  </div>
			  <div class="modal-footer">
				<button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
				<button type="button" class="btn btn-primary" onclick="saveApiModal();">保存</button>
			  </div>
			</div>
			<!-- /.modal-content -->
		  </div>
		  <!-- /.modal-dialog -->
	  </div>
	  <!-- /.modal -->
	  
    </section>
  </div>

</body>
</html>